<script setup lang="ts">
import { getTagList } from '@/api/system/tag';
import type { Tag } from '@/api/system/tag/type';
import { onMounted, ref } from 'vue';
import AddTag from './components/AddTag.vue';

const showAdd = ref(false)
const tagList = ref([] as Tag[]);

onMounted(() => {
    getTagList().then((res) => {
        tagList.value = res.data;
    })
})
</script>

<template>
    <div>
        <div class="header">
            <el-button @click="showAdd = true" type="primary">添加</el-button>
        </div>
        <el-table :data="tagList" style="width: 100%" stripe border>
            <el-table-column prop="name" label="标签名" />
            <el-table-column prop="type" label="标签类型" />
            <el-table-column prop="created" label="创建时间" />
            <el-table-column prop="updated" label="更新时间" />
        </el-table>
        <AddTag v-model="showAdd"></AddTag>
    </div>
</template>

<style lang="scss" scoped>
.header {
    margin-bottom: 1%;
}
</style>